/**
 *
 */
angular
    .module('baocloud.DragBox')
    .directive('dragBox', dragBox)
    .controller('DragBoxController', DragBoxController);

function dragBox() {
    var directive = {
        restrict: 'AE',
        replace: true,
        scope: {
            model: '=',
            sorts: '='
        },
        templateUrl: function (element, attrs) {
            return attrs.templateUrl || 'DragBox/dragbox.html';
        },
        link: link

    };
    return directive;
}

function link(scope, element, attr, ctrl) {
    //console.log('link--->', scope.model);
}

function DragBoxController($scope, $timeout) {
    self = this;
    self.dragBoxs = [{
        id: '01',
        text: 'CPU使用率(%)',
        value: '100'
    }, {
        id: '02',
        text: '内存使用率(%)',
        value: '100'
    }, {
        id: '03',
        text: '网络流量(进)',
        value: '100'
    }, {
        id: '04',
        text: '网络流量(出)',
        value: '100'
    }, {
        id: '05',
        text: '存储空间',
        value: '100'
    }];
    self.display = true;
    self.menudisplay = false;
    self.sorts = [];
    self.sortableOptions = {
        handle: '.dragbox-head',
        update: function (e, ui) {
            $timeout(function () {
                for (var i = 0; i < self.dragBoxs.length; i++) {
                    //self.sorts.unshift(self.dragBoxs[i].id);
                    self.sorts.splice(i, 1, self.dragBoxs[i].id);
                }
                console.log(self.sorts);
            })
        },
        stop: function (e, ui) {
            console.log(ui.item.scope().box.text);
        }
    };

    self.fullscreenEnable = false;
    self.fullScreen = function(classez){
        if(!fullscreenEnable()){
            if(!classez) return;
            var element = document.querySelector('.' + classez);
            var requestMethod = fullScreenMethod(element);
            requestMethod.call(element);
            self.fullscreenEnable = true;
        }else{
            //关闭
        }

        //console.log('fullscreenEnable-->',fullscreenEnable());
    }

    $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
        console.log('fullscreenchange',fullscreenEnable());
        if(!fullscreenEnable()) {
            $timeout(function(){
                self.fullscreenEnable = false;
            });

        }
    });


    $scope.$on("resizable.resizeEnd", function (event, args) {
        console.log('resizeEnd-->', args);
    });
}


function fullscreenEnable() {
    return document.fullscreenEnabled || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement;
}

function fullScreenMethod(el) {
    return el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.oRequestFullScreen || el.msRequestFullScreen;
}